<template>
	<view class="content">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					交易品种
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerInstrument" :value="indexObj.instrumentIndex" :range="instrumentArray">
						<view class="uni-input">{{instrumentArray[indexObj.instrumentIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-form-item uni-column">
			<radio-group name="radio" style="padding-left: 20upx;">
				<label>
					<radio value="radio1" /><text>开多</text>
				</label>
				<label>
					<radio value="radio2" /><text>开空</text>
				</label>
			</radio-group>
		</view>	
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					价格区间
				</view>
				<view class="uni-list-cell-db">
					<view class="uni-form-item">
						<input class="uni-input" focus placeholder="价格底部" />
					</view>
				</view>
				<view class="uni-list-cell-db">					
					<view class="uni-form-item">
						<input class="uni-input" focus placeholder="价格顶部" />
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					仓位模式
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerPosition" :value="indexObj.positionIndex" :range="positionArray">
						<view class="uni-input">{{positionArray[indexObj.positionIndex]}}</view>
					</picker>					
				</view>
				<view class="uni-list-cell-db">					
					<view class="uni-form-item">
						<input class="uni-input" focus placeholder="仓位等级" />
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					开仓策略
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerOpen" :value="indexObj.openIndex" :range="openArray">
						<view class="uni-input">{{openArray[indexObj.openIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					风控规则
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerRisk" :value="indexObj.riskIndex" :range="riskArray">
						<view class="uni-input">{{riskArray[indexObj.riskIndex]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-textarea">
			<textarea @blur="bindTextAreaBlur" auto-height placeholder="开仓依据" />
			</view>
		<view class="uni-textarea">
			<textarea @blur="bindTextAreaBlur" auto-height placeholder="事后评估" />	
		</view>
		<view class="uni-btn-v">
			<button type="primary">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				instrumentArray: ['eos季度', 'eos永续'],
				positionArray: ['金字塔', '漏掉', '矩形'],
				riskArray: ['10倍10%止盈止损', '10倍10止盈止损', '10倍10止盈止损'],
				openArray: ['铁三角', '截血', '宝塔'],
				indexObj: {
					instrumentIndex: 0,
					positionIndex: 0,
					riskIndex: 0,
					openIndex: 0
				},
			}
		},
		methods: {
			bindPickerInstrument: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexObj.instrumentIndex = e.target.value
			},
			bindPickerPosition: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexObj.positionIndex = e.target.value
			},
			bindPickerRisk: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexObj.riskIndex = e.target.value
			},
			bindPickerOpen: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexObj.openIndex = e.target.value
			},
			bindTextAreaBlur: function (e) {
			            console.log(e.detail.value)
			        }
		}
	}
</script>

<style>
	.content {
		padding: 15upx;
	}
</style>
